<!--
- Author:   .
- Date:    2018/1/11 0011.
- File:    bankcard.
-->
<template>
  <div class="Web_Box">
    <div class="Withdrawals">
      <ul>
        <li>
          <label><span class="nim">开户名</span><input type="text" placeholder="请输入真实姓名" v-model="bankcardEdit.account_name"></label>
        </li>
        <li class="f-cb"><i class="iconfont icon-downdot"></i>
          <label>
            <span class="nim">开户行</span>
            <select v-model="bankcardEdit.bank_id">
              <option value="" selected>请选择开户行</option>
              <option v-for="bank in bankList" :value="bank.bank_id">{{bank.bank_name}}</option>
            </select>
          </label>
        </li>
        <li>
          <label><span class="nim">卡号</span><input type="tel" placeholder="请输入银行卡号" v-model="bankcardEdit.member_bank_num"></label>
        </li>
        <li>
          <label><span class="nim">手机号码</span><input type="tel" placeholder="银行卡绑定的手机号码" v-model="bankcardEdit.member_mobile"></label>
        </li>
      </ul>
    </div>
    <div class="SetDefaults">
      <i class="iconfont icon-pitch2" v-show="!bankcardEdit.is_default || bankcardEdit.is_default == '0'" @click="switchDefault('1')"></i>
      <i class="iconfont icon-pitchon2" v-show="bankcardEdit.is_default == '1'" @click="switchDefault('0')"></i>
      设为默认
    </div>
    <div class="pl20 pr20 mt35">
      <button type="button" class="but_1 wauto" @click="saveBankcard">保存</button>
    </div>
    <back-nav></back-nav>
  </div>

</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import * as request from '../../request'

  export default{
    mixins: [
      mapModules({bankcardList: 'bankcardList'}),
      mapRules({once: ['bankcardList']})
    ],

    beforeRouteEnter (to, from, next) {
      request.getBankList().then(data => {
        next(vm => {
          vm.from = from.name
          vm.bankList = data
        })
      }).catch(e => {
        next()
      })
    },
    data() {
      return {
        from: '',
        bankcardId: this.$route.query.bankcard || null,
        bankList: [],
        bankcardIndex: -1,
        bankcardEdit: {bank_id: '', account_name: '', member_bank_num: '', member_mobile: '', mb_id: '', is_default: '1'}
      }
    },
    components: {},
    created() {
      this.initBankcardEdit()
    },
    methods: {
      switchDefault(value) {
        this.bankcardEdit.is_default = value
      },
      initBankcardEdit() {
        for (let i = 0; i < this.bankcardList.data.length; i++) {
          if (this.bankcardList.data[i].mb_id == this.bankcardId) {
            this.bankcardEdit = this.$utils.clone(this.bankcardList.data[i])
            this.bankcardIndex = i
            break
          }
        }
      },
      saveBankcard() {
        if (!this.bankcardEdit.account_name) {
          this.$toast('请输入开户名')
          return
        }
        if (!this.bankcardEdit.bank_id) {
          this.$toast('请选择开户行')
          return
        }
        if (!this.bankcardEdit.member_bank_num) {
          this.$toast('请输入卡号')
          return
        }
        if (!this.$validator.phone(this.bankcardEdit.member_mobile)) {
          this.$toast('请输入正确的手机号')
          return
        }
        this.$request.editBankcard(this.bankcardEdit).then(data => {
          if (this.from === 'account-withdraw') {  // 来自下单页query: {from: 'order-confirm', cart: this.$route.query.cart, type: this.type}
            this.$router.replace({name: 'account-withdraw', query: {type: this.$route.query.type, bankcard: data.mb_id}})
          } else { // 来自地址列表页
            this.$toast('保存成功')
            this.$router.go(-1)
          }
        }).catch(e => {
          this.$toast('保存银行卡失败:' + e.msg)
          console.error('保存银行卡失败', e)
        })
      }
    }
  }
</script>

<style>

</style>